<template>
	<page-header-wrapper>
		<a-card :bordered="false">

			<a-tabs v-model:activeKey="kucun" @change="changeKucun">
				<a-tab-pane :key="0" tab="全部"></a-tab-pane>
				<a-tab-pane :key="1" tab="有库存"></a-tab-pane>
				<a-tab-pane :key="2" tab="无库存"></a-tab-pane>
			</a-tabs>

			<div class="table-page-search-wrapper">
				<a-form layout="inline">
					<a-row :gutter="48">
						<a-col :md="6" :sm="24">
							<a-form-item label="名称">
								<a-input allow-clear placeholder="请输入名称" v-model="queryParam.name" />
							</a-form-item>
						</a-col>
						<a-col :md="12" :sm="24">
							<a-button type="primary" @click="handleSearch">查询</a-button>
							<a-button style="margin-left: 8px" @click="resetSearch">重置</a-button>
						</a-col>
					</a-row>
				</a-form>
				<!-- 	<a-row style="margin-bottom: 10px">
					<a-button type="primary" style="margin-right: 10px" icon="plus" @click="addStore"> 添加西药</a-button>
					<a-button type="dashed" style="margin-right: 10px" icon="download"
						@click="downloadTemplate">下载上传模版</a-button>
					<a-upload :show-upload-list="false" name="file" :action="aliOssConfig.fileUrl+'xiyaodaoru'"
						:before-upload="beforeUpload" :data="formData" @change="handleChange">
						<a-button icon="upload">
							<upload-outlined></upload-outlined>
							批量上传
						</a-button>
					</a-upload>
				</a-row> -->
			</div>

			<a-table :scroll="{ x: true }" ref="table" @change="tablePaginationChange" :pagination="pagination" bordered
				:dataSource="dataSource" :columns="columns" :rowKey="(record,index)=> index">
				<div slot-scope="text, record" slot="image" style="display: flex;flex-wrap:wrap;">
					<img @click="previewImg(item)" v-for="(item,index) in record.image.split(',')" :key='index'
						class="banner-img" style="margin: 10px;" :src="item" />
				</div>
				<!--     <div slot="status" slot-scope="text, record" href="javascript:;">
          <a-switch @change="changeStatus($event,record)" v-model:checked="record.disable==2?false:true" />
        </div> -->

				<div slot="supplyprice" slot-scope="text, record" href="javascript:;">
					<a-input v-model="record.supplyprice"></a-input>
				</div>
				<div slot="inventory" slot-scope="text, record" href="javascript:;">
					<a-input v-model="record.inventory"></a-input>
				</div>
				<div slot="action" slot-scope="text, record" href="javascript:;">
					<a-button size='small' type="link" @click="submit(record)">
						保存
					</a-button>
					<!-- <a-divider type="vertical" />
          <a-popconfirm title="是否要删除此行？" @confirm="deletInfo(record)">
            <a-button size='small' type="link" style="color: #fc2b2f">
              删除
            </a-button>
          </a-popconfirm> -->
				</div>
			</a-table>
		</a-card>
		<addBox ref="addBox" :visible="addFlag" @cancel="addCancel" @ok="AddSuccess">
		</addBox>
		<imgBox ref='preimg'></imgBox>
	</page-header-wrapper>
</template>

<script>
	import {
		STable,
		Ellipsis,
	} from '@/components'
	import {
		medicineWesList,
		medicineWesDelet,
		medicineList,
		medicinepdisable,
		medicinesPharmacy,
		medicineWesAdd,
		medicineWesUpdate,
	} from '@/api/medicine'
	import addBox from './add'

	import {
		ExclamationCircleOutlined
	} from '@ant-design/icons-vue';
	import {
		createVNode
	} from 'vue';
	import {
		Modal
	} from 'ant-design-vue';
	import imgBox from '@/components/previewImg/index'

	import aliOssConfig from '@/utils/aliOss/config'
	import {
		getFormData
	} from '@/utils/aliOss/aliossUpload.js'

	export default {
		components: {
			STable,
			Ellipsis,
			addBox,
			imgBox
		},
		data() {
			return {
				aliOssConfig: aliOssConfig,
				shenhe: 0, //审核
				status: 0, //状态
				addFlag: false,
				pagination: {
					current: 1, //默认当前叶数
					total: 0, // 数据总数 如果不设置就以绑定的数据量为准
					pageSize: 10, // 默认每页条数
					showSizeChanger: true, //是否可以改变 pageSize
					pageSizeOptions: ['10', '20', '40', '80', '100'], //可切换每叶数据条数
					showTotal: total => this.$t('共') + ' ' + `${total}` + ' ' + this.$t('条数据'), // 分页中显示总的数据
					hideOnSinglePage: false // 只有一页时是否隐藏分页器 true为不显示 false为显示
				},
				queryParam: {
					name: '',
					drugtypeid: ''
				},
				searchflag: false,
				dataSource: [],
				columns: [{
						title: 'id',
						dataIndex: 'id',
						key: 'id',
						width: 100,
					},
					{
						title: '图片',
						key: 'image',
						dataIndex: 'image',
						// width: 200,
						scopedSlots: {
							customRender: 'image'
						}
					},
					{
						title: '名称',
						dataIndex: 'name',
						key: 'name',
						ellipsis: true,
						width: 150,
					},
					{
						title: '分类',
						dataIndex: 'drugtypeid',
						key: 'drugtypeid',
						ellipsis: true,
						width: 150
					},
					{
						title: '厂家',
						dataIndex: 'changjia',
						key: 'changjia',
						ellipsis: true,
						width: 150
					},
					{
						title: '规格',
						dataIndex: 'guige',
						key: 'guige',
						ellipsis: true,
						width: 150
					},
					{
						title: '处方药',
						dataIndex: 'chufangyao',
						key: 'chufangyao',
						ellipsis: true,
						width: 150
					},
					{
						title: '适应症',
						dataIndex: 'indications',
						key: 'indications',
						ellipsis: true,
						width: 150
					},
					{
						title: '用法',
						dataIndex: 'yongfa',
						key: 'yongfa',
						ellipsis: true,
						width: 150
					},
					{
						title: '成分',
						dataIndex: 'chengfen',
						key: 'chengfen',
						ellipsis: true,
						width: 150
					},
					{
						title: '性状',
						dataIndex: 'xingzhuan',
						key: 'xingzhuan',
						ellipsis: true,
						width: 150
					},
					{
						title: '剂型',
						dataIndex: 'jixing',
						key: 'jixing',
						ellipsis: true,
						width: 150
					},
					{
						title: '不良反应',
						dataIndex: 'blfy',
						key: 'blfy',
						ellipsis: true,
						width: 150
					},

					{
						title: '禁忌',
						dataIndex: 'jinji',
						key: 'jinji',
						ellipsis: true,
						width: 150
					},
					{
						title: '注意事项',
						dataIndex: 'zhuyi',
						key: 'zhuyi',
						ellipsis: true,
						width: 150
					},
					{
						title: '药物相互作用',
						dataIndex: 'ywhxzy',
						key: 'ywhxzy',
						ellipsis: true,
						width: 150
					},
					{
						title: '毒性',
						dataIndex: 'duxing',
						key: 'duxing',
						ellipsis: true,
						width: 150
					},
					{
						title: '供货价',
						dataIndex: 'supplyprice',
						key: 'supplyprice',
						ellipsis: true,
						fixed: 'right',
						width: 90,
						scopedSlots: {
							customRender: 'supplyprice'
						}
					},
					{
						title: '库存',
						dataIndex: 'inventory',
						key: 'inventory',
						ellipsis: true,
						fixed: 'right',
						width: 90,
						scopedSlots: {
							customRender: 'inventory'
						}
					},

					{
						title: '操作',
						key: 'operation',
						fixed: 'right',
						width: 190,
						scopedSlots: {
							customRender: 'action'
						}
					}
				],
				typeList: [],
				formData: '',
				kucun: 0
			}
		},
		created() {
			this.getList()
			// this.getType()
		},
		methods: {

			submit(v) {
				if (v.supplyprice == '') {
					this.$message.error('请输入供货价')
					return
				}
				if (v.inventory == '') {
					this.$message.error('请输入库存')
					return
				}
				let values = {}
				values.pharmacymedicineid = parseInt(v.id)
				// values.id = v.id
				values.pharmacyid = parseInt(this.$store.getters.id)
				values.inventory = parseInt(v.inventory)
				values.supplyprice = parseFloat(v.supplyprice)

				medicineWesUpdate({
					...values,
				}).then((res) => {
					if (res.code == 0) {
						this.$message.success('保存成功')
						this.getList()
					}
				})

				// if (this.updateflag) {
				// 	values.id = this.id
				// 	medicineWesUpdate({
				// 		...values,
				// 	}).then((res) => {
				// 		if (res.code == 0) {
				// 			this.getList()
				// 		}
				// 	})
				// } else {
				// 	medicineWesAdd({
				// 		...values,
				// 	}).then((res) => {
				// 		if (res.code == 0) {
				// 			this.getList()
				// 		}
				// 	})
				// }
			},

			changeKucun(e) {
				this.pageNo = 1
				this.getList()
			},
			handleChange(info) {
				if (info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if (info.file.status == 'done') {
					this.pageNo = 1
					this.getList()
					this.loading = false
				}
			},
			beforeUpload(file) {
				this.formData = getFormData()
				return true
			},

			// 下载上传模版
			downloadTemplate() {
				window.open(
					'https://zhongyi.weizi000.cn/upload/moban/药店西药模板.xlsx')
			},
			changeStatus(e, v) {
				medicinepdisable({
					pharmacymedicineid: v.pharmacymedicineid,
					disable: e ? 1 : 2
				}).then(res => {
					this.$message.success('修改成功')
					this.getList()
				})
			},
			getType() {
				medicineList().then(res => {
					this.typeList = res.data
				})
			},
			handleSearch() {
				this.pagination.current = 1
				this.searchflag = true
				this.getList()
			},
			resetSearch() {
				this.pagination.current = 1
				this.searchflag = false
				this.queryParam = {
					name: '',
					drugtypeid: ''
				}
				this.getList()
			},
			previewImg(img) {
				this.$refs.preimg.initData(img)
			},
			getList() {
				let data = {
					pharmacyid: parseInt(this.$store.getters.id),
					pageNo: this.pagination.current,
					pageSize: this.pagination.pageSize,
					kucun: this.kucun
				}
				if (this.searchflag) {
					data = {
						pharmacyid: parseInt(this.$store.getters.id),
						pageNo: this.pagination.current,
						pageSize: this.pagination.pageSize,
						...this.queryParam
					}
				}
				medicinesPharmacy(data).then(res => {
					this.pagination.total = res.data.totalCount
					this.dataSource = res.data.data
				})
			},
			updateInfo(val) {
				this.addFlag = true
				this.$nextTick(() => {
					this.$refs.addBox.setUpdate(val)
				})
			},

			addCancel() {
				this.addFlag = false
			},
			AddSuccess() {
				this.addFlag = false
				this.getList()
			},
			addStore() {
				this.addFlag = true
				this.$nextTick(() => {
					this.$refs.addBox.updateflag = false
				})
			},
			tablePaginationChange(e) {
				this.pagination = e
				this.getList()
			},
			getDate(stamp) {
				var date = new Date(stamp * 1000)
				return date.getFullYear() + '-' + (date.getMonth() + 1 < 10 ? ('0' + (date.getMonth() + 1)) : date
					.getMonth() +
					1) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
			},
			deletInfo(val) {
				medicineWesDelet({
					id: val.id
				}).then(res => {
					this.getList()
				})
			}
		}
	}
</script>
<style scoped>
	.banner-img {
		width: 50px;
		height: 50px;
		border-radius: 5px;
		cursor: pointer;
	}
</style>